<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  个人题库  -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/TeacherAll.css">
</head>
<body>
    <div class="FileDiv">

<!--   一个题库    通过sql语句查询然后循环题库     -->
        <c:if test="${BhSyUserTK!=null}">
            <c:forEach var="i" items="${BhSyUserTK}">
                <div class="theFile">
                    <a href="../UserTopic/selBhtopic?name=${i.tName}&uid=${i.uID}">
                        <img class="fileImg" src="${pageContext.request.contextPath}/img/BhCase/fileimg.png">
                    </a>
                    <p class="fileFont">${i.tName}</p>
                </div>
            </c:forEach>
        </c:if>
        <c:if test="${bhtopic!=null}">
            <form action="../Excel/upLoadExcel" method="post" enctype="multipart/form-data">
                <div id="addTopicDiv">
                    <p onclick="transformBig(this)">添加题目</p>
                    <input name="excelFile" align="center" type="file" id="addTopic"/><br/>
                    <button id="btnAddTopic">添加</button>
                    <input id="no_btnAddTopic" type="button" onclick="transformSmall(this)" value="取消">
                </div>
            </form>
            <table id="bhtopicTable">
                <tr>
                    <th>题目id</th>
                    <th>创建者</th>
                    <th>题型</th>
                    <th>题目</th>
                </tr>
                <c:forEach var="i" items="${bhtopic}">
                    <tr>
                        <td>${i.topIcID}</td>
                        <td>${i.uID}</td>
                        <td>${i.cType}</td>
                        <td>${i.cPor}</td>
                    </tr>
                </c:forEach>
            </table>
        </c:if>
    </div>
</body>

<script>

    //添加题目的div
    var inputTopicDiv = document.querySelector("#addTopicDiv");
    //添加题目的div里的[文件选择input]
    var inputTopic=document.querySelector("#addTopic");
    //添加题目按钮
    var btnAddTopic=document.querySelector("#btnAddTopic");
    //取消添加题目按钮
    var no_btnAddTopic=document.querySelector("#no_btnAddTopic");

    //初始化div
    transformSmall();

    //div收束
    function transformSmall() {
        console.log("触发了Small");
        //div的变化
        inputTopicDiv.style.transition="0.8s";
        inputTopicDiv.style.width="200px";
        inputTopicDiv.style.height="23px";
        inputTopicDiv.style.backgroundColor="green";
        inputTopicDiv.style.textAlign="center";
        inputTopicDiv.style.position="absolute";
        inputTopicDiv.style.right="0px";
        //div内元素的变化
        //[input]
        inputTopic.style.transition="0.4s";
        inputTopic.style.width="0px";
        //[btnAddTopic]
        btnAddTopic.style.transition="0.5s";
        btnAddTopic.style.display="none";
        btnAddTopic.style.fontSize="0px";
        btnAddTopic.style.width="0px";
        btnAddTopic.style.height="0px";
        //[no_btnAddTopic]
        no_btnAddTopic.style.transition="0.5s";
        no_btnAddTopic.style.display="none";
        no_btnAddTopic.style.fontSize="0px";
        no_btnAddTopic.style.width="0px";
        no_btnAddTopic.style.height="0px";

    }

    //div展开
    function transformBig() {
        console.log("触发了Big");
        //div的变化
        inputTopicDiv.style.transition = "0.8s";
        inputTopicDiv.style.width = "200px";
        inputTopicDiv.style.height = "80px";
        inputTopicDiv.style.backgroundColor = "orange";
        inputTopicDiv.style.textAlign = "center";
        //div内元素的变化
        //[input]
        inputTopic.style.transition = "0.4s";
        inputTopic.style.width = "200px";
        //[btnAddTopic]
        btnAddTopic.style.transition = "0.5s";
        btnAddTopic.style.float="left";
        btnAddTopic.style.display="block";
        btnAddTopic.style.fontSize="10px";
        btnAddTopic.style.width = "70px";
        btnAddTopic.style.height = "20px";
        //[no_btnAddTopic]
        no_btnAddTopic.style.transition = "0.5s";
        no_btnAddTopic.style.float="left";
        no_btnAddTopic.style.display="block";
        no_btnAddTopic.style.fontSize="10px";
        no_btnAddTopic.style.width = "70px";
        no_btnAddTopic.style.height = "20px";



    }


</script>

</html>